<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}

	li {
		/*取消列表样式*/
		list-style: none;
	}

	.banner {
		width: 760px;
		height: 150px;
		margin:0 auto;
		background-color: red;
	}

	.nav {
		width: 760px;
		height: 32px;
		margin: 0 auto;
		background-color:orange;
		background: url(images/nav_bg.jpg) repeat-x;
	}
	
	/* 给li标签价浮动 */
	.nav ul li {
		/* li标签使文字竖着显示，我们需要给li标签浮动 */
		float: left;
	}	

	.nav ul li a {
		/* a是行内元素，需要转换 */
		display: block;
		width: 80px;
		height: 32px;
		background: url(images/button1.jpg) no-repeat;

		/* 设置字体 */
		font-size:12px;
		line-height: 32px;
		text-align: center;
		text-decoration: none;
	} 

	/* 鼠标经过a标签的样式 */
	.nav ul li a:hover {
		background: url(images/button2.jpg);	
	}

	</style>		
</head>
<body>
	<h1 align="center">一般导航条都是 li标签嵌套a标签，比较好用，搜索引擎友好</h1>
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<div class="nav">
		<ul>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
		</ul>
	</div>

</body>
</html>